<template>
    <div class="com-detail">
        <h2>NNG 中台</h2>
        <p class="bind-accont">绑定管理员账号</p>
        <el-form :model="companyInfo" :rules="rules" ref="companyInfo">
            <el-form-item prop="phone">
                <el-input v-model.number="companyInfo.phone" placeholder="请输入管理员手机号"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input v-model.number="companyInfo.code" placeholder="请输入验证码"></el-input>
                <el-button type="primary" class="send-code" @click="sendCode" :disabled="isDisabled">发送验证码</el-button>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" class="complate" @click="submitForm('companyInfo')" :loading="isLoading">完成</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'ComDetail',
    data() {
        //自定义手机号验证
    const checkPhone = (rule, value, callback) => {
      if (value == "") {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    }
    // 验证验证码
    const checkCode = (rule, value, callback) => {
        if(value == "") {
            return callback(new Error("请输入验证码"));
        }else{
            const reg1 = /^[0-9]{6}$/
            if (!reg1.test(value)){
                return callback(new Error("验证码必须为6位数"))
            }else{
                callback();
            }
        }
    }
        return {
            companyInfo: {
                phone: '',
                code: ''
            },
            rules: {
                phone: [
                    { validator: checkPhone, required: true, trigger: 'change' }
                ],
                code: [
                    { validator: checkCode, required: true, trigger: 'change' }
                ]
            },
            isDisabled: false,
            isLoading: false
        }
    },
    methods: {
        submitForm(companyInfo){
            this.$refs.companyInfo.validate(valid => {
                if(valid){
                console.log(this.companyInfo)
                this.isLoading = true
                setTimeout(() => {
                    this.$router.push({ name: 'Login' }) // 跳转到登录页
                }, 1000)
                
            }else{
                console.log('error submit!!');
                return false
                }
            })
        },
        sendCode(){ // 发送验证码
            this.isDisabled = true;
            setTimeout(() => {
                this.isDisabled = false;
            }, 3000);
        }
    }
}
</script>

<style lang="scss" scoped>
.com-detail{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 400px;
    height: 400px;
    background-color: #ffffff;
    h2{
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 30px;
        text-align: center;
    }
    .bind-accont{
        font-weight: 500;
        font-size: 22px;
        margin: 20px 0;
    }
    .send-code{
        margin-left: 20px;
    }
    .complate{
        width: 100%;
    }
}
</style>
